<template>
  <div class="container">
    <router-view class="main"></router-view>
    <van-tabbar :fixed="false" route v-show="isShow">
      <van-tabbar-item icon="home-o" :to="{name:'Home'}">首页</van-tabbar-item>
      <van-tabbar-item icon="bag-o" :to="{name:'List'}">商品</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :to="{name:'Cart'}" :badge="cartCount > 0 ? cartCount : ''">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" :to="{name:'User'}">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {loadCartsAPI} from "./services/carts"
export default {
  data(){
    return{
      isShow:true,
      cartCount:0
    }
  },
  created(){
    this.$eventBus.$on('updateCartCount',this.loadCartCount)
  },
  watch:{
    //监听路由改变，设置底部tbarBar是否显示
    $route(v){
      if(v.meta.hideTabBar){
          this.isShow=false
      }else{
        this.isShow=true
      }
    }
  },
  methods:{
    async loadCartCount(){
        const res=await loadCartsAPI()
       this.cartCount = res.data.reduce((pre, cur) => pre + cur.amount, 0);
    }
  }
};
</script>
<style lang="scss">
</style>
